Figma 最佳实践：组件、样式和共享库（下）
点上面↑关注，查看更多设计文章
导读：这是一篇来自 Figma 官方博客的最佳实践指南，介绍了 Figma 最强大的两个特性——组件和共享样式，并通过一系列的实例讲述了什么时候该创建组件，如何合理创建组件，共享样式的使用，以及该如何组织这些共享的库。全文较长，这是第二篇，点这里回顾上篇。
组件最佳实践
现在你对基本的使用准则比较熟悉了，让我们来讨论一些组件最佳实践方法，来帮助你更好地使用和维护这些组件。
保留组件文本内容：当你给一个组件做它的变体或不同状态时，肯定是希望在切换组件时能够保持其内部文本不变的。为了确保你在切换组件状态时内部文字内容保持不变，你需要保证一个组件不同状态之间的内部对应文字图层有相同的名字（实际上文字图层会以你第一次输入的内容作为图层名）。
如果内部对应文字图层名相同，当切换不同状态组件时内部文字保持不变
组件描述：你可以在右侧的属性面板中给每一个组件写一段描述。当你的鼠标悬浮在左侧组件面板的某个组件上面的时候，这段描述就会显示出来。你可以在里面写一些该组件的使用方法来帮助其他设计师更好地挑选合适的组件。
在组件面板中把鼠标移到某个组件之上，就会显示该组件的描述。
响应式约束和栅格：只需要花一点点时间来给组件设置合适的响应式约束，你的组件就可以在尺寸变化时让其内部元素做适当的响应式变化。因为组件和 Frame 行为一致，所以你可以给组件同时添加栅格和响应式约束，让内部元素紧贴栅格边缘，来实现固定内外边距的效果。
将响应式约束和栅格相结合，更方便地设计出拥有内外边距的响应式组件。
内容裁切：你可以在右侧属性面板中切换是否显示超出组件或 Frame 的内容。当你的组件内有很多重复性内容，并且你想在改变组件尺寸时控制其显示的数量，就可以使用这个特性来实现。比如说，你可以在调节组件高度时控制一个表格显示的行数，不过在此之前请确保设置了正确的响应式约束规则。
将响应式约束和栅格相结合，更方便地设计出拥有内外边距的响应式组件。
样式
除了组件，你还可以把样式加入共享库。创建共享样式很简单，但是依然有一些小技巧可以帮助你更加高效的使用它们。
文字样式：Figma 将对齐和颜色等属性从样式中分离出来，因此不需要为每种颜色或对齐方式的文字专门创建单独的样式。这样就可以创建更少的共享样式，使它们更容易管理。许多用户会创建两套文字样式，其中一套用于移动设备，另一套用于桌面。
颜色样式：确保为你的设计系统中每一种颜色创建一个样式，并且给它们起合适的名字，这样在使用时就可以更清晰地知道该用哪个颜色了。
效果样式：你可以将常用的效果，诸如图层模糊、模糊背景、内外阴影等，保存下来以方便后续使用。比如说，在 Material 设计系统中就有一系列设置好的深浅不同的阴影样式，它们可以被用在各种不同的元素上，以此来展现模态框、按钮等元素的不同层级。
栅格样式：栅格是一种很容易被忽略的样式。我们可以将常用的栅格布局保存为共享样式，这样在进行桌面或移动端设计时就可以快速使用。
样式使用小技巧
样式命名：样式命名对于共享样式库的显示顺序十分重要，你可以通过斜线分隔命名的方式来给它们归类。比如说你可以设置一系列的警告颜色，都以 Alerts/ 开头，再设置一组排版文字的颜色，都以 Text/ 开头，这样它们就会被自动归类，方便你在使用时查找。一般有以下几种分类依据：
按色调分组类
按主题或类型分类
将可访问性高的颜色分为一组
将文字样式按照字体或类型分类
将栅格按照视图尺寸分类
样式描述：给样式添加描述和给组件添加描述作用一致，描述信息可以帮助你判断哪里该用哪种样式，保持团队风格统一。
样式命名和描述可以帮助你辨别样式的用法，或者帮助你提取出你所创建的共享样式代码
注意：当开发查看设计标注时，你写的描述都会显示出来。一般描述是作为注释和样式显示在一起，而样式中的颜色、阴影等会以变量的形式显示。
图片填充作为占位符：我们在设计时经常会需要一些诸如人物头像、照片等占位符，方便快速设计。那么我们就可以创建一系列图片填充样式，并将它们加入样式共享库，这样就可以在任何地方使用了，而且不限图层的形状。
创建图像填充样式并把它们添加到任意的图层、形状当中
用布局栅格创建间隔：一般我们在设计时还会给元素间预留统一的间隔，或者说内外边距。那么我们就可以创建一些栅格布局，比如说行栅格或列栅格，来辅助元素排列，获得统一的内外边距。我们可以将栅格也保存为共享样式，方便在需要时随时创建辅助布局栅格。
使用栅格在你的设计系统中设计出统一的内外边距
组织和创建共享库
想要创建一个共享库很简单，你只需要点击某个文件右上角长得像书一样的按钮，就可以选择发布该文件中的组件和共享样式了。一旦发布，该文件中的保存的组件和样式就可以在其它所有文件中使用了。当你处于跨团队的工作模式，或者在一个大型组织中工作时，就会考虑到该如何组织这些组件和共享样式了。你可能会想：应该创建多少个共享库呢？该如何组织组件呢？此时你要记住，你的用户是使用这些共享库的人。
我们经常会被问道：我是该创建一个共享库还是分多个呢？这个问题的答案是：看情况。是的，没有最好的方式，只有最合适的。让我们看看下面几种情况吧。
所有东西都在一个共享库中
很多团队，尤其是小团队，会把所有共享组件和样式放在一个共享库中，这样方便管理。这种方式有很多优点，但是当你的业务或团队扩大时难免会遇到一些问题。
所有共享组件或样式存在于一个文件中
好处：所有组件或样式都存在于一个文件中，可以很容易地查找，也很方便维护。
缺点：对于大型团队或组织来说，一般会有很多平台或产品，所有共享组件或样式都在一个文件中，意味着一个人几十只会用到很小一部分也要在庞大的内容里面筛选。
分离的多个共享库
很多团队，尤其是中大型团队，会把组件或样式放置于多个样式库文件中。这样，再团队增大时就很容易扩展和管理。
将组件或样式分散于多个共享库文件中，用户只需要关心自己使用的那一部分
好处：通过将组件或样式分散于不同的文件中，我们就可以给不同的用户或小组分配不同的共享组件或样式。比如说，你的团队中有一个小组只负责移动端的设计，那么我们就可以将移动端的组件或样式放置于一个文件中，再共享给他们，这样他们就只需要关心自己需要的共享库，查找起来也很方便
缺点：对于那些管理、维护和发布共享库的人来说，他们需要处理更多的共享库了。
Figma 专业版和团队版都支持跨文件使用共享库，来帮助你更好地管理和使用它们。
组织管理组件
在 Figma 中，组件是很灵活的，你可以通过命名来组织它们，也可以通过页面或 Frame 来给它们分类，或者将这些方式结合起来。
斜线命名法
你可以通过斜线分割命名的方式，来组织组件。如果你使用过 Sketch 的话，应该对这种方式很熟悉。比如说你现在有 primary 和 secondary 两种按钮，每种按钮又有不同的状态，就可以像这样命名：
buttons/primary/default
buttons/primary/hover
buttons/secondary/hover
buttons/secondary/active
好处：这是最快捷的一种组织方式，你只需要修改组件命名，就可以按照预想的方式组织它们，并且在“相关组件”的面板中快速切换。
缺点：这个方法虽然很快捷，但是有时候在大型设计系统中容易产生命名特别长的情况。如果命名太长，在图层面板中就很难一眼看清楚哪个是哪个。所以，如果你愿意花一些时间来更好地组织组件的话，我们推荐你另一种方式。
页面和 Frame
我们推荐你用页面或 Frame 来组织组件。
通过页面或者 Frame 来组织组件，将它们划分出不同的类别，以便在组件面板中使用
好处：你可以通过这种方式将组件归类于不同的页面或者 Frame 中，这样就可以用比较短的命名，方便查找。同时，这种命名方式也更加接近实际代码中的命名。
比如说，你创建了一个页面并起名为 Buttons，在这个页面中又有两个 Frame，用来放置不同类型的按钮（Primary 和 Secondary）。这样，你的按钮在左侧的组件面板中就会按照一定的层级显示：Buttons 作为大分类的标题，Primary 和 Secondary 作为可以收起和展开的子标题。
我们可以将这种组织方式和上面提到的组件描述相结合起来，甚至在组件旁边添加一些使用示例、使用规范，形成一个完整的组件文档。这样，当用户在其它地方使用到这个组件时，可以右击组件，选择“前往 master 组件”来打开组件文档，查看更加详细的解释。
此外，在同一个 Frame 中的组件会被视为“相关组件”。这样，你就可以在选中某个组件实例时在右侧通过相关组件下拉框来快速切换组件，而不必在组件文档中苦苦查找。
如果你还想要更深的层级，可以使用上述的斜线命名法。不过，使用了斜线命名法之后 Figma 的“相关组件”会以此为准。
技巧提示：如果你是从 Sketch 过来的用户，想快速把斜线命名的 Symbol 转换为以页面和 Frame 组织的组件库，可以使用 Figma 的批量命名功能。你只需要选中需要重命名的组件，右击选择重命名，或者按下快捷键（Mac：CMD + R，Win：CTRL + R），就会弹出重命名模态框，此时你就可以使用正则表达式来快速替换命名。
使用批量重命名来节省时间
最后的一些想法
Figma 很灵活，你可以选择多种方式来构建和组织你的设计系统，但是我们希望你能找到最合适你的团队的一种。我们从过往的经验中学到的一点我觉得值得说一下，那就是当你构建这个设计系统时不要忘记了它的使用者是谁，你要把他们当做产品的用户看待，选择最适合他们的方式，方便他们使用、查找和理解。如果你做到了这一点，你们的团队协作一定会保持快速且方向一致。
作者：Thomas Lowry，Figma 设计支持
翻译：Juuun
原文：https://www.figma.com/blog/component-styles-and-shared-library-best-practices
觉得还不错，欢迎点在看、分享或转发